<template>
  <div id="app">
    <div class="comment-area">
      <textarea v-model="text"
                cols="30"
                rows="10"></textarea>
      <button class="comment-add-btn"
              @click="applyParent">添加评论</button>
    </div>
    <commentList :list="commentParentList" />
  </div>
</template>

<script>
import CommentList from './components/CommentList'
import { mapState } from 'vuex'
export default {
  name: 'App',
  computed: {
    ...mapState(['commentParentList']),
    allCommentList: {
      get () {
        return this.$store.state.allCommentList
      },
      set (value) {
        this.$store.commit('changeState', {
          prop: 'allCommentList',
          value
        })
      }
    },
  },
  data () {
    return {
      text: ''
    }
  },
  components: {
    CommentList
  },
  methods: {
    applyParent () {
      const { commentParentList, allCommentList, text } = this
      const id = allCommentList.length + 1
      allCommentList.push({
        id,
        text,
        time: new Date().getTime(),
        kids: []
      })
      commentParentList.push(id)
      this.text = ''
    }
  }
}
</script>

<style lang="scss">
.comment-area {
  margin-bottom: 20px;
  .comment-add-btn {
    display: block;
  }
}
</style>
